<template>
  <div id="app">
    <div class="test-tree">
      <div class="test-tree__search">
        <input v-model="keyword" type="text" /><button @click="handleSearchClick">搜索</button>
        <span @click="handleFillDataClick">填充数据</span>
      </div>
      <div class="test-tree__result">
        <tree-select 
          height="300px"
          ref="tree"
          :loading="false"
          :data="data" 
          :default-expand-level="1" 
          label-key="title"
          :filter-method="handleFilterMethod"
          @current="handleCurrentChange"
          @node-dblclick="handleNodeDblClick"
        >
          <div class="toolbar" slot="addon" slot-scope="{ node }">
            <span class="toolbar-item" @click="handleRemoveNode(node)">删除</span>
            <span class="toolbar-item" @click="handleAddNode(node)">新增</span>
          </div>
        </tree-select> 
      </div>
    </div>
  </div>
</template>

<script>
import TreeSelect from '@/index.js'
import treeData from './json.json'

console.log(treeData)

export default {
  name: 'App',
  components: {
    TreeSelect
  },
  data () {
    return {
      keyword: '',
      current: '',
      data: []
    }
  },
  computed: {
    // data () {
    //   return []
    // },
    treeData () {
      return []
      // if (!this.data) {
      //   return []
      // }
      // const data = JSON.parse(JSON.stringify(this.data))
      // const keys = Object.keys(data)
      // return (keys || []).reduce((rs, k) => {
      //   const item = this.data[k]
      //   if (item && item.level === 1) {
      //     if (item.children) {
      //       item.children = item.children.map(v => this.data[v])
      //       item.children.forEach(vv => {
      //         if (vv.children) {
      //           vv.children = vv.children.map(vvv => this.data[vvv])
      //           vv.children.forEach(vvv => {
      //             delete vvv.children
      //           })
      //         }
      //         if (vv.children && !vv.children.length) {
      //           delete vv.children
      //         }
      //       })
      //       if (!item.children.length) {
      //         delete item.children
      //       }
      //     }
      //     rs.push(item)
      //   }
      //   return rs
      // }, [])
    }
  },
  methods: {
    handleCurrentChange (evt) {
      console.log(evt)
    },
    handleNodeDblClick (evt) {
      console.log(evt)
    },
    handleFillDataClick () {
      this.data = treeData
    },
    handleRemoveNode (node) {
      this.$refs.tree.removeNode(node)
    },
    handleAddNode (node) {
      this.$refs.tree.insertNode({
        title: '测试新增模版',
        id: Date.now()
      }, node)
    },
    handleSearchClick () {
      this.$refs.tree.filter(this.keyword)
    },
    handleFilterMethod ({ node, keyword }) {
      if (!keyword) {
        return true
      }
      return node.data.title.indexOf(keyword) >= 0
    }
  }
}
</script>

<style>
.test-tree{
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 480px;
  margin: 30px auto;
}
.test-tree__search{
  padding: 6px;
  text-align: center;
  border-bottom: 1px solid #ddd;;
}
</style>
